<template>
    <view>
        <!-- pages/activity/index.wxml -->
        <!-- 轮播图 -->
        <view class="banner">
            <swiper class="swiper1" :indicator-dots="true" :autoplay="true" interval="2000" duration="300" indicator-active-color="#fff" :circular="true">
                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/kiKJ285eX9lsaCu11joLSFakoE7jXazv/av_banner1.png" mode="aspectFill" />
                </swiper-item>
                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/mmk4Ks0TwVwhKbAkIpET6njJrPuHfoup/av_banner2.png" mode="" />
                </swiper-item>

                <swiper-item>
                    <image src="http://lc-LXl0IGlm.cn-n1.lcfile.com/zXK39KI0FaozlH6Y9aA8vuYMvh2LL4S4/av_banner3.png" mode="" />
                </swiper-item>
            </swiper>
        </view>
        <swiper class="swiper2">
            <swiper-item>
                <view class="box cu-list grid col-3 no-border">
                    <view class="cu-item" v-for="(item, index) in activityList" :key="index">
                        <image :src="item.img" />

                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
// pages/activity/index.js
export default {
    data() {
        return {
            activityList: [
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/iwK7liv7MRLKNMyeYACkhnNRcvcooNIh/activity1.png',
                    name: '下里巴人剧场'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/w5bkCJ5a3JHQ92VWwqWaQrOcNtOd0W2T/activity2.png',
                    name: '缤果大剧院'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/sULkIpD6aY4aNw8bOW5xQbJ78dRWJhWF/activity3.png',
                    name: '六度空间'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/gYG2Q04ucQQTIgp6IWqBgG41arnEdv1z/activity4.png',
                    name: '学生社团活动阵地'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/lgtRaq1sdjhAn1t5mO7Bk0jbGPfsGJjD/activity5.png',
                    name: '万画影城教学厅'
                },
                {
                    img: 'http://lc-LXl0IGlm.cn-n1.lcfile.com/jFaSg5OPI7Cfirdx9TkijB53T9gfbwe5/activity6.png',
                    name: 'Disco House'
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style>
/* pages/academy/index.wxss */
page {
    background-color: #f1f1f1;
}

.swiper2 {
    width: 740rpx;
    height: 820rpx;
    background-color: #f1f1f1;
    /* background-color: red !important; */
}

.swiper2 .box {
    width: 740rpx;
    height: 820rpx;
    border-radius: 5%;
}

.cu-item {
    width: 130rpx;
    height: 150rpx;
    /* background-color:green; */
}

.cu-item image {
    width: 70rpx;
    height: 72rpx;
    margin: auto;
}

.swiper1 {
    width: 740rpx;
    height: 276rpx;
    /* border: 1rpx solid red; */
    margin: auto;
    margin-bottom: 50rpx;
    /* border-radius: 5%; */
    overflow: hidden;
    border-radius: 18rpx;
    box-sizing: border-box;
    transform: translateY(0);
    line-height: 1rpx;
}

swiper-item image {
    width: 100%;
    height: 100%;
}
</style>
